@import './abstracts/variable';
@import './abstracts/mixin';

@include b(drop-item) {
  position: absolute;
  right: 0;
  left: 0;
  overflow: hidden;
  font-size: $-drop-menu-item-fs;
  color: $-drop-menu-item-color;
  width: 100%;
  z-index: 101;
  transition: all .3s;

  @include e(modal) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: $-drop-menu-item-modal-bg;
    height: 100%;
    z-index: 100;
    transition: opacity .3s;
    opacity: 1;
  }
  
  @include e(popup){
    position: absolute;
    z-index: 101;
    width: 100%;
    background-color: #fff;
  }

  @include e(title){
    display: inline-block;
    box-sizing: border-box;
    height: $-drop-menu-item-height;
    line-height: $-drop-menu-item-height;
    padding: 0 $-drop-menu-side-padding;
  }

  @include e(icon){
    vertical-align: middle;
    float: right;
    height: $-drop-menu-item-height;
    line-height: $-drop-menu-item-height;
    padding: 0 $-drop-menu-side-padding;
    transform: scale(.6);
  }
}
.wd-drop--slide-down-enter-active .wd-drop-item__popup, .wd-drop--slide-down-leave-active .wd-drop-item__popup,
.wd-drop--slide-up-enter-active .wd-drop-item__popup, .wd-drop--slide-up-leave-active .wd-drop-item__popup{
  transition: transform .3s;
}

.wd-drop--slide-up-enter .wd-drop-item__popup,
.wd-drop--slide-up-leave-to .wd-drop-item__popup{
  transform: translateY(100%);
}

.wd-drop--slide-down-enter .wd-drop-item__popup,
.wd-drop--slide-down-leave-to .wd-drop-item__popup{
  transform: translateY(-100%);
}
.wd-drop-item__modal-leave{
  opacity: 0;
}